<!-- 新通道进出报表 2018.4.19 -->
<template>
  <div class="common-body-wrapper">
    <search-header single-width="130" :searchList="searchList" @changeHeight="toRetTable" @confirmSearch="toSearch" @handleChange="handleSearchChange"
    :isCheckbox="true" :isNeedTree="true" :paramName="paramName" @setSelectedNode="setSelectedNode"></search-header>

    <div class="common-table-tree-wrapper">
      <div class="common-table-wrapper">

        <multi-fun-table :sortColumn='notFormatColumn' :orderType='sortType' :fixed-cols="fixedCols" :is-reset-table="isResetTable" :theads-info="theadsInfo" :tbodys-info="tbodysInfo" @handleMultiCheck="handleMultiCheck" @handleSortColumn="handleSortColumn" @searchFn="getList" @getNextPage="getNextPage">
          <!--按钮-->
          <div class="operate-btn-group" slot="operateBtnGroup">
            <a class="ake_btn ake_btn_text" v-if="isPermmited('REPORT:TOLLCOLLECTOR:EXPORT')" @click.prevent="exportData()">导出</a>
            <a class="ake_btn ake_btn_text" @click.prevent="reBuild()" v-if="isPermmited('REPORT:CHANNEL:REBUILD')">重新生成</a>
          </div>

          <!--普通列-->
          <template slot="tdCell" slot-scope="props">
            <el-table-column v-if="props.isMultiHeader" :label="props.label" align="center">
              <template v-for="(item, index) in props.children">
                <el-table-column v-if="item.checked" :key="index" :label="item.text" min-width="30" :prop="item.prop" :sortable="item.sortable">
                  <template slot-scope="scope">
                    <!-- <span v-if="'abnormalOutCount' == item.prop && scope.$index!=0 && scope.row['channelTypeStr']!='进场通道' && scope.row[item.prop]!=0">
                      <a @click="openDetial('abnormalOutCount',scope.row)" class="linkUrl">{{scope.row[item.prop] }}</a>
                    </span>
                    <span v-else-if="'abnormalOpenGateCount' == item.prop && scope.$index!=0 && scope.row['channelTypeStr']!='进场通道' && scope.row[item.prop]!=0">
                      <a @click="openDetial('abnormalOpenGateCount',scope.row)" class="linkUrl">{{scope.row[item.prop] }}</a>
                    </span> -->
                    <span v-if="'redlistVipParkingCount' == item.prop && scope.$index!=0 && scope.row['channelTypeStr']!='进场通道' && scope.row[item.prop]!=0">
                      <a @click="openDetial('redlistVipParkingCount',scope.row)" class="linkUrl cursor">{{scope.row[item.prop] }}</a>
                    </span>
                    <!-- <span v-else-if="'freeTimeParkCount' == item.prop && scope.$index!==0">
                      <a @click="openDetial('freeTimeParkCount',scope.row)" class="linkUrl">{{scope.row[item.prop] }}</a>
                    </span> -->
                    <span v-else>{{ scope.row[item.prop] }}</span>
                  </template>
                </el-table-column>
              </template>
            </el-table-column>

            <el-table-column v-else :fixed="props.fixed" :label="props.label" :min-width="props.minWidth" :width="props.width" :prop="props.prop" :sortable="props.sortable">
              <template slot-scope="scope">
                <span v-if="'reno' == props.prop && scope.$index==0">合计</span>
                <span v-if="'reno' == props.prop && scope.$index!=0">{{ scope.$index }}</span>
                <span v-if="'abnormalOutCount' == props.prop && scope.$index!=0 && scope.row['channelTypeStr']!='进场通道' && scope.row[props.prop]!=0">
                    <a @click="openDetial('abnormalOutCount',scope.row)" class="linkUrl cursor">{{scope.row[props.prop] }}</a>
                </span>
                <span v-else-if="'abnormalOpenGateCount' == props.prop && scope.$index!=0 && scope.row['channelTypeStr']!='进场通道' && scope.row[props.prop]!=0">
                    <a @click="openDetial('abnormalOpenGateCount',scope.row)" class="linkUrl cursor">{{scope.row[props.prop] }}</a>
                </span>
                <span v-else>{{ scope.row[props.prop] }}</span>
              </template>
            </el-table-column>
          </template>
          <!--操作列内的按钮-->
          <!-- <template slot="operateCell" slot-scope="props">
                    <el-table-column :fixed="props.fixed" :label="props.label" min-width="130">
                        <template slot-scope="scope">
                            <el-button title="确认收款" size="small" type="primary" class="ake_btn ake_font_btn ake_btn_green" icon="circle-check" v-if="isPermmited('REPORT:PAY:CONFIRM_CHARGE') && scope.row.status=='FINISH_PAY'" @click="confirmOnlineReceipts(scope.row)"></el-button>
                        </template>
                    </el-table-column>
                </template> -->
        </multi-fun-table>
        <table-pagination :size="total" :cur-page="pageNumber" @backData="getPagination"></table-pagination>
      </div>
    </div>
    <!-- 表格形式    查看详情 modal       -->
    <basic-modal ref="abnormalOutCountModal" static="true" width="1000">
      <h3 slot="title">异常放行详情</h3>
      <div class="ModalBody detailCss" slot='modal-body'>
        <div class="modalExportBox">
          <a class="ake_btn ake_btn_text" @click.prevent="modalexportFn('/report/new_channel/abnormalOutReportExport.do')">导出</a>
        </div>
        <el-table :data="modalData_abnormalOutCount.tbBody" :height="350" border style="width: 100%">
          <template v-for="(item,index) in modalData_abnormalOutCountTheads">
            <el-table-column :label="item.label" :key="index" :width="item.width">
              <template slot-scope="scope">
                <span v-if="item.propName=='reno'&&scope.$index==0">合计</span>
                <span v-else-if="item.propName=='reno'&&scope.$index!=0">{{scope.$index}}</span>
                <span v-else-if="item.propName=='reportDate'">{{scope.row[item.propName] | mileSecondToDate}}</span>
                <span v-else>{{scope.row[item.propName]}}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <div class="paginationBox">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="modalData_abnormalOutCount.page" :page-sizes="[10, 20, 50, 100]" :page-size="modalData_abnormalOutCount.rp" layout="total, sizes, prev, pager, next, jumper" :total="modalData_abnormalOutCount.total">
          </el-pagination>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('abnormalOutCountModal')">关闭</button>
      </div>
    </basic-modal>
    <!-- 表格形式    查看详情 modal       -->
    <basic-modal ref="abnormalOpenGateCountModal" static="true" width="1000">
      <h3 slot="title">非系统开闸详情</h3>
      <div class="ModalBody detailCss" slot='modal-body'>
        <div class="modalExportBox">
          <a class="ake_btn ake_btn_text" @click.prevent="modalexportFn('/report/new_channel/abnormalOpenGateOutReportExport.do')">导出</a>
        </div>
        <el-table :data="modalData_abnormalOpenGateCount.tbBody" :height="350" border style="width: 100%">
          <template v-for="(item,index) in modalData_abnormalOpenGateCountTheads">
            <el-table-column :label="item.label" :key="index" :width="item.width">
              <template slot-scope="scope">
                <span v-if="item.propName=='reno'&&scope.$index==0">合计</span>
                <span v-else-if="item.propName=='reno'&&scope.$index!=0">{{scope.$index}}</span>
                <!-- <span v-else-if="item.propName=='reportDateStr'">{{scope.row[item.propName] | mileSecondToDate}}</span> -->

                <span v-else>{{scope.row[item.propName]}}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <div class="paginationBox">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="modalData_abnormalOpenGateCount.page" :page-sizes="[10, 20, 50, 100]" :page-size="modalData_abnormalOpenGateCount.rp" layout="total, sizes, prev, pager, next, jumper" :total="modalData_abnormalOpenGateCount.total">
          </el-pagination>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('abnormalOpenGateCountModal')">关闭</button>
      </div>
    </basic-modal>

    <!-- 组件形式    查看详情 modal       -->
    <basic-modal ref="redlistVipParkingCountModal" static="true" width="1000">
      <h3 slot="title">红名单车辆离场详情</h3>
      <div class="ModalBody detailCss" slot='modal-body'>
        <div class="modalExportBox">
          <a class="ake_btn ake_btn_text" @click.prevent="modalexportFn('park/carLeaveHistory/exportCarLeaveHistory.do')">导出</a>
        </div>
        <el-table :data="modalData_redlistVipParkingCount.tbBody" :height="350" border style="width: 100%">
          <template v-for="(item,index) in modalData_redlistVipParkingCountTheads" >
            <el-table-column :label="item.label" :key="index" :width="item.width">
              <template slot-scope="scope">
                <!-- <span v-if="item.propName=='reno'&&scope.$index==0">合计</span> -->
                <!-- <span v-else-if="item.propName=='reno'&&scope.$index!=0">{{scope.$index}}</span> -->
                <!-- <span v-else-if="item.propName=='reportDateStr'">{{scope.row[item.propName] | mileSecondToDate}}</span> -->
                <span v-if="item.propName=='reno'">{{scope.$index+1}}</span>
                <span v-else-if="item.propName=='approchTime'||item.propName=='leaveTime'">{{scope.row[item.propName] | mileSecondToDate}}</span>
                <span v-else-if="'parkingDuration' == item.propName">
                    {{ scope.row['parkingDuration'] |formatTimeLength}}
                </span>
                <span v-else-if="'approchPlateUrl' == item.propName">
                  <a class="imgLink" @click="showBigImgModal('bigPicModal', scope.row['approchPlateUrl'])">
                    <img class="carNoImage" style="width: 60px;height:30px;" alt="暂无" :src="scope.row[item.propName]" />
                  </a>
                </span>
                <span v-else-if="'leavePlateUrl' == item.propName">
                  <a class="imgLink" @click="showBigImgModal('bigPicModal', scope.row['leavePlateUrl'])">
                    <img class="carNoImage" style="width: 60px;height:30px;" alt="暂无" :src="scope.row[item.propName]" />
                  </a>
                </span>
                <span v-else>{{scope.row[item.propName]}}</span>
              </template>
            </el-table-column>
          </template>
        </el-table>
        <div class="paginationBox">
          <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="modalData_redlistVipParkingCount.page" :page-sizes="[10, 20, 50, 100]" :page-size="modalData_redlistVipParkingCount.rp" layout="total, sizes, prev, pager, next, jumper" :total="modalData_redlistVipParkingCount.total">
          </el-pagination>
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('redlistVipParkingCountModal')">关闭</button>
      </div>
    </basic-modal>

    <big-pic-modal ref="bigPicModal">
      <img slot="bigImgSlot" :src="bigImgPath | setImgPath" alt="" @error="imgError('../../', 'car', $event)">
    </big-pic-modal>

    <!-- 组件形式 查看详情 modal -->
    <basic-modal ref="freeTimeParkCountModal" static="true" width="1000">
      <h3 slot="title">免费时间内离场详情</h3>
      <div class="ModalBody detailCss" slot='modal-body'>
        <!-- <chargeWater :setData="detailSetData"></chargeWater> -->
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close" @click="closed('freeTimeParkCountModal')">关闭</button>
      </div>
    </basic-modal>

    <ReBuildBtn ref="myReBuildBtn" :reqUrl="reqUrl" :timeDimensionList="timeDimensionList"></ReBuildBtn>
  </div>
</template>

<script>
import common from "@mixins/common.js";
import stardardList from "@mixins/tables/stardardList.js";

//modal
import invokeModal from "@mixins/modal/invokeModal.js";
import BigPicModal from '@components/widgets/BigPicModal.vue'

// 引进vue的js
import channel_inout_report from "./js/channel_inout_report.js";
import ReBuildBtn from "@components/reBuildBtn/index.vue";
export default {
  name: 'reportChannel',
  mixins: [common, stardardList, invokeModal, channel_inout_report],
  components: {
    BigPicModal,
    ReBuildBtn
  },
  data() {
    var today = [new Date(moment().subtract('days', 1).format("YYYY-MM-DD 00:00:00")), new Date(moment().subtract('days', 1).format("YYYY-MM-DD 23:59:59"))]; //昨天
    return {
      reqUrl: '/report/new_channel/reStatReport.do',
      timeDimensionList:[
        { name: "日报", value: "date" },
        { name: "月报", value: "month" },
      ],
      total: 0,
      fixedCols: 0,
      paramName: "parkIds",
      searchList: [
         {
          index: 0,
          isShow: true,
          type: "select",
          name: "reportDimension",
          text: "时间维度",
          value: "day",
          isHandleChange: true,
          options: [
            { name: "日报", value: "day" },
            { name: "月报", value: "month" },
            { name: "年报", value: "year" },
            { name: "自定义", value: "custom" }
          ]
        },
        {
          index: 1,
          format: "yyyy-MM-dd",
          isShow: true,
          type: "datePicker",
          pickerType: "daterange",
          name: "dateFromTo",
          propName: "reportDateFrom,reportDateTo",
          text: "日期",
          value: today,
          style: { width: "360px" },
        },
        {
          index: 2,
          isShow: true,
          type: "text",
          name: "query_parkName",
          propName: "query_parkName",
          text: "停车场名称",
          value: ""
        },
        {
          index: 3,
          isShow: true,
          type: "text",
          name: "query_channelName",
          propName: "query_channelName",
          text: "通道名称",
          value: ""
        },
        {
          index: 4,
          isShow: true,
          type: "select",
          name: "query_channelType",
          propName: "query_channelType",
          text: "通道类型",
          value: "",
          options: [
            { name: "全部", value: "" },
            { name: "进场", value: "1" },
            { name: "离场", value: "2" }
          ]
        }
      ],
      theadsInfo: [
        // { index: 0, isShow: false, prop: "reno", text: "序号", width: 68 },
        {
          index: 1,
          isShow: false,
          prop: "reportDateStr",
          text: "日期",
        },
        {
          index: 2,
          isShow: false,
          prop: "parkName",
          text: "停车场",
        },
        {
          index: 3,
          isShow: false,
          prop: "channelTypeStr",
          text: "通道类型",
        },
        {
          index: 4,
          isShow: false,
          prop: "channelName",
          text: "通道名称",
        },
        {
          index: 5,
          isShow: false,
          prop: "",
          text: "车辆类型",
          isMultiHeader: true,
          minWidth: 110,
          children: [
            {
              index: 1,
              isShow: false,
              prop: "normalParkingCount",
              text: "临时车辆",
            },
            {
              index: 2,
              isShow: false,
              prop: "localVipParkingCount",
              text: "本地VIP",
            },
            {
              index: 3,
              isShow: false,
              prop: "visitorVipParkingCount",
              text: "来访车辆",
            },
            {
              index: 4,
              isShow: false,
              prop: "blacklistVipParkingCount",
              text: "黑名单",
            },
            {
              index: 5,
              isShow: false,
              prop: "redlistVipParkingCount",
              text: "红名单",
            }
          ]
        },
        {
              index: 6,
              isShow: false,
              prop: "abnormalOutCount",
              text: "异常放行",
        },
        {
              index: 7,
              isShow: false,
              prop: "abnormalOpenGateCount",
              text: "非系统开闸",
            },
        {
          index: 8,
          isShow: false,
          prop: "",
          text: "车辆计费类型（辆）",
          minWidth: 110,
          isMultiHeader: true,
          children: [
            {
              index: 1,
              isShow: false,
              prop: "smallCarCount",
              text: "小型车",
            },
            {
              index: 2,
              isShow: false,
              prop: "middleCarCount",
              text: "中型车",
            },
            {
              index: 3,
              isShow: false,
              prop: "bigCarCount",
              text: "大型车",
            },
            {
              index: 4,
              isShow: false,
              prop: "biggerCarCount",
              text: "超大型车",
            }
          ]
        },
        {
          index: 9,
          isShow: false,
          prop: "",
          text: "车辆收费情况（辆）",
          minWidth: 110,
          isMultiHeader: true,
          children: [
            {
              index: 1,
              isShow: false,
              prop: "chargeParkCount",
              text: "收费车辆",
            },
            {
              index: 2,
              isShow: false,
              prop: "freeParkCount",
              text: "免费车辆",
            },
            {
              index: 3,
              isShow: false,
              prop: "freeTimeParkCount",
              text: "免费时间内离场",
            }
          ]
        },
        {
          index: 10,
          isShow: false,
          prop: "",
          text: "优惠情况",
          minWidth: 110,
          isMultiHeader: true,
          children: [
            {
              index: 1,
              isShow: false,
              prop: "localDiscountParkCount",
              text: "人工优惠",
            },
            {
              index: 2,
              isShow: false,
              prop: "parkOnlineDiscountCount",
              text: "线上优惠或商家优惠",
            },
            {
              index: 3,
              isShow: false,
              prop: "noDiscountParkCount",
              text: "未优惠车辆",
            }
          ]
        }
      ],
      tbodysInfo: []
    };
  },
  filters: {
    formatBillStatus: function(billStatus) {
      return billStatus == 2 ? "已支付" : "未支付";
    }
  }
};
</script>

<style lang="less" scoped>
.user-row-modal {
  .modal-body {
    max-height: 400px;
  }
  .first-item {
    width: 240px;
  }
}

.role-select {
  width: 240px;
}

#parkNameListModal {
  min-height: 400px;
}
.detailCss {
  padding: 10px 20px;
}
.linkUrl {
  color: rgb(35, 83, 218);
  &:hover {
    color: rgb(20, 69, 202);
  }
}
.paginationBox {
  padding: 15px;
  display: flex;
  justify-content: center;
}
.modalExportBox {
  padding: 5px 0;
}

.el-table {
    height: 350px!important;
}
</style>
